<template>
  <div class="petWarehouse">
    <el-dialog v-model="isShow" :title="operateType == 'add' ? '添加宠物' : '编辑宠物'" width="56%" :show-close="false">
      <!-- 绑定form标签 form数据 -->
      <CForm :form="form" :formlabel="formlabel" :inline="true" />
      <template #footer>
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </template>
    </el-dialog>

    <div class="table-operation">
      <el-input clearable v-model="keywords" placeholder="搜索关键字" />
      <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
      <el-button type="warning" :icon="Plus" @click="add">添加宠物</el-button>
      <el-button type="info" :icon="Refresh" @click="getPageData('')">刷新</el-button>
    </div>

    <div class="pet-table">
      <CTable :table-data="tableData" :table-label="tableLabel" :edit="edit" :del="del" :loading="loading" />
    </div>

    <!-- 分页器 -->
    <CPagination :page-info="pageInfo" :handle-current-change="handleCurrentChange"
      :handle-size-change="handleSizeChange" />
  </div>
</template>

<script setup lang="ts">
import { Search, Plus, Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref, watchEffect } from 'vue';
import CTable from '../../components/CTable.vue';
import CPagination from '../../components/CPagination.vue'
import CForm from '../../components/CForm.vue';
import { getPetsApi, delPetApi, addPetApi, updatePetApi } from '../../api/warehouse'

//表格
const tableLabel = reactive([
  { name: 'name', label: '名称' },
  { name: 'date', label: '抓捕日期', width: 160, sortable: true },
  { name: 'dept', label: '系别' },
  { name: 'intimacy', label: '亲密度' },
  { name: 'talent', label: '种族值' },
  { name: 'rarity', label: '稀有度' },
  { name: 'character', label: '性格' }
])

let tableData = ref()
let loading = ref(true)

// 分页信息
const pageInfo = reactive({
  // 页面大小
  pageSize: 10,
  // 当前页
  currentPage: 1,
  // 总数据量
  total: 0,
})
function handleSizeChange(val: number) {
  pageInfo.pageSize = val
  getPageData()
}
function handleCurrentChange(val: number) {
  pageInfo.currentPage = val
  getPageData()
}
// 获取页面数据
async function getPageData(name?: string | undefined) {
  loading.value = true
  const res = await getPetsApi(pageInfo, name)
  const pageData = res.data.pageData
  // 对时间格式化
  pageData.forEach((item: { date: string }) => {
    item.date = item.date.slice(0, 10)
  })
  tableData.value = pageData
  pageInfo.total = res.data.total
  loading.value = false
}

onMounted(() => {
  getPageData()
})

const keywords = ref('')

const formlabel = reactive([
  {
    model: "name",
    label: "姓名",
    type: "input",
  },
  {
    model: "date",
    label: "捕捉日期",
    type: "date",
  },
  {
    model: "dept",
    label: "系别",
    type: "select",
    opts: [
      {
        label: "雷电系",
        value: "雷电系",
      },
      {
        label: "鳄龟系",
        value: "鳄龟系",
      },
      {
        label: '草系',
        value: '草系',
      },
      {
        label: '精神系',
        value: '精神系',
      },
      {
        label: '火系',
        value: '火系',
      }
    ],
  },
  {
    model: "intimacy",
    label: "亲密度",
    type: "input",
  },
  {
    model: "talent",
    label: "种族值",
    type: "input",
  },
  {
    model: "rarity",
    label: "稀有度",
    type: "input",
  },
  {
    model: "character",
    label: "性格",
    type: "input",
  },
])

let form = ref<any>({})

let isShow = ref(false)
let operateType = ref('add')

function add() {
  operateType.value = 'add'
  form.value = {}
  isShow.value = true
}

function edit(row: any) {
  operateType.value = 'edit'
  form.value = row
  isShow.value = true
}

function del(row: any) {
  ElMessageBox.confirm(
    '删除后不可恢复，是否删除',
    '警告',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      const { id } = row
      const res = await delPetApi(id)
      if (res.data.msg == '删除成功') {
        ElMessage.success(res.data.msg)
        // 刷新
        getPageData()
      } else {
        ElMessage.warning(res.data.msg)
      }
    })
    .catch(() => {
      ElMessage.info('已取消操作')
    })
}

async function confirm() {
  if (operateType.value == 'add') {
    // 添加
    const res = await addPetApi(form.value)
    ElMessage.success(res.data.msg)
  } else {
    // 修改
    const res = await updatePetApi(form.value);
    ElMessage.success(res.data.msg)
  }
  console.log(form.value)
  isShow.value = false
  getPageData()
}

// 过滤搜索
async function search() {
  await getPageData(keywords.value)
  keywords.value = ''
}
</script>
